<template>
  <div class="wxNavigation">
    <div id="map"></div>
    <div class="my-route">
      <div class="title">
        <span>我的旅程</span>
        <div @click="toEdit">修改<i class="el-icon-arrow-right"></i></div>
      </div>
      <ul class="content">
        <li v-for="(item,i) in routeline" :class="{'chk':routeIndex==i}" :key="i" @click="showVillage(i)">
          <img :src="item.image[0]" />
          <div class="flex">
            <div class="tit">{{i+1}}.{{item.villageName}}</div>
            <p><span>约{{item.timeStr}}</span> <span>{{item.length}}km</span> <span>{{item.villageLabelName}}</span>
            </p>
            <p class="local"><i class="el-icon-location"></i>{{item.villageAddress}}</p>
          </div>
        </li>
      </ul>
      <div class="Navigation">
        <div class="TourismBegins" @click="openLocal">
          <i class="el-icon-s-promotion"></i>旅行开始
        </div>
        <!-- <div class="btn">
          <img src="@/assets/images/heart-icon-at.png" alt="">
        </div> -->
      </div>
    </div>


  </div>
</template>

<script>
  window._AMapSecurityConfig = {
    securityJsCode: "1de37d2fc1b761d5ccacf8eee4b0c3b8",
  };
  import AMapLoader from "@amap/amap-jsapi-loader";

  import { getEnv, getRouteTripInfo, getWxJsSdk, startTraveling } from "@/api/wechat/navigation";

  export default {
    name: "wxNavigation",
    data() {
      return {
        map: null,
        travelId: null,
        userId: null,
        longitude: null,
        latitude: null,
        unUser: 1,
        markerIcon: null,
        routeIndex: -1,
        routeline: []
      };
    },
    created() {
      wx.miniProgram.getEnv((envRes) => {
        if (envRes.miniprogram) {
          getWxJsSdk({ url: location.href.split('#')[0] }).then(res => {
            let config = res.data;
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: config.appId, // 必填，公众号的唯一标识
              timestamp: config.timestamp, // 必填，生成签名的时间戳
              nonceStr: config.nonceStr, // 必填，生成签名的随机串
              signature: config.signature, // 必填，签名
              jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表
            });
          })
        }
      })

      document.title = "旅行开始";
      this.travelId = this.$route.query.travelId;
      this.unUser = this.$route.query.unUser;
      this.userId = this.$route.query.userId;
      this.longitude = this.$route.query.longitude;
      this.latitude = this.$route.query.latitude;

      if (this.unUser == 1 && this.$store.getters.isUnUser == 0) {
        this.$router.replace({
          path: '/wxNavigation',
          query: {
            userId: this.userId,
            travelId: this.travelId,
            unUser: 0,
            longitude: this.longitude,
            latitude: this.latitude
          }
        })
        this.$router.go(0)
      } else {
        this.setMap();
        this.getInfo()
      }
    },
    methods: {
      getInfo() {
        getRouteTripInfo({
          userId: this.userId,
          travelId: this.travelId,
          type: this.unUser,
          longitude: this.longitude,
          latitude: this.latitude
        }).then(res => {
          // console.log(res)
          this.routeline = res.data.routeInfoVillageDtos || []
          this.routeline.forEach(village => {
            let timeStr = '';
            if (village.time) {
              let time = village.time.split(':').map(item => { return item * 1 });
              if (time[0]) timeStr += time[0] + '小时'
              if (time[1]) timeStr += time[1] + '分钟'
              if (!timeStr) timeStr += '小于 1 分钟'
            }
            if (village.villageImage) {
              village.image = village.villageImage.split(',').map(img => {
                return process.env.VUE_APP_BASE_API + img;
              })
            } else {
              village.image = [];
            }
            village.timeStr = timeStr;
          })
        })
      },
      showVillage(i) {
        this.routeIndex = i;
        let village = this.routeline[i];
        this.map.clearMap();
        let villageMarker = new AMap.Marker({
          position: new AMap.LngLat(village.villageLongitude, village.villageLatitude),
          offset: new AMap.Pixel(-10.5, -28),
          icon: this.markerIcon, // 添加 Icon 实例
          title: village.villageName,
        });
        this.map.add(villageMarker)
        this.map.setCenter([village.villageLongitude, village.villageLatitude]);
      },
      toEdit() {
        this.$router.push({
          path: '/wxTravelEdit',
          query: {
            userId: this.userId,
            travelId: this.travelId,
            unUser: this.unUser,
            longitude: this.longitude,
            latitude: this.latitude
          }
        })
      },
      setMap() {
        AMapLoader.load({
          key: "c818b1b759eb2cad524fee31e071311c",
          version: "2.0",
          plugins: ["AMap.Geocoder"],
        }).then((AMap) => {
          this.geocoder = new AMap.Geocoder({});
          this.map = new AMap.Map("map", {
            zoom: 11,
            center: [this.longitude, this.latitude],
            mapStyle: "amap://styles/54058aa0a123f042cdab644aaa6e580b",
            showIndoorMap: false,
          });

          this.markerIcon = new AMap.Icon({
            size: new AMap.Size(21, 28), // 图标尺寸
            image: require("../../assets/images/address-zs.png"), // Icon的图像
            imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: new AMap.Size(21, 28), // 根据所设置的大小拉伸或压缩图片
          });
        }).catch((e) => {
          console.log(e);
        });
      },
      openLocal() {
        let village = this.routeIndex == -1 ? this.routeline[0] : this.routeline[this.routeIndex];
        startTraveling({ travelId: this.travelId, userId: this.userId, travelState: true })
        wx.miniProgram.getEnv((envRes) => {
          if (envRes.miniprogram) {
            wx.openLocation({
              name: village.villageName,
              address: village.villageAddress,
              longitude: village.villageLongitude * 1,
              latitude: village.villageLatitude * 1,
            })
          }
        })
        tt.miniProgram.getEnv((envRes)=>{
           if(envRes.miniprogram){
            tt.miniProgram.openLocation({
              name: village.villageName,
              address: village.villageAddress,
              longitude: village.villageLongitude * 1,
              latitude: village.villageLatitude * 1,
            })
          }
        })
      },
    },
  };
</script>
<style>
  .wxNavigation .amap-logo,
  .wxNavigation .amap-copyright {
    display: none !important;
  }
</style>
<style scoped lang="scss">
  .wxNavigation {
    height: 100vh;
    display: flex;
    flex-direction: column;

    #map {
      flex: 1;
    }

    .my-route {
      background-color: #ffffff;
      padding-top: 20px;
      height: 55%;
      position: relative;

      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;

        span {
          font-size: 15px;
        }

        div {
          font-size: 12px;
        }
      }

      .content {
        height: calc(100% - 73px);
        margin: 0;
        padding: 10px 0;
        overflow: scroll;

        &::-webkit-scrollbar {
          width: 0px;
        }

        li {
          margin: 10px 20px;
          list-style: none;
          padding: 10px;
          border-radius: 10px;
          box-shadow: 2px 3px 14px rgba(99, 99, 99, 0.06);
          display: flex;

          &.chk {
            box-shadow: 0 0 14px #bbb;
          }

          img {
            width: 70px;
            height: 70px;
            border-radius: 6px;
          }

          .flex {
            margin-left: 10px;
            font-size: 16px;
            width: calc(100% - 100px);

            p {
              // 文本-超出部分: ...
              text-overflow: ellipsis;
              // 超出部分: 隐藏
              overflow: hidden;
              // 文本不换行
              white-space: nowrap;
              margin: 6px 0;
              color: #8f8f8f;
              font-size: 12px;
            }

            p:last-child {
              margin: 0;
              color: rgba(70, 70, 159, 0.8);
            }
          }
        }
      }

      .Navigation {
        display: flex;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 15px 17px;
        background-color: #ffffff;
        box-shadow: 0 -3px 4px rgba(70, 70, 159, 0.04);

        .TourismBegins {
          flex: 1;
          color: #46469e;
          border-radius: 10px;
          background-color: #f5f5f9;
          display: inline-block;
          padding: 10px;
          text-align: center;

          i {
            margin: 0 10px 0 0;
            font-size: 16px;
          }
        }

        .btn {
          margin-left: 10px;
          text-align: center;
          padding: 13px 0;
          width: 40px;
          display: inline-block;
          border-radius: 10px;
          background-color: #f5f5f9;
          font-size: 0;

          img {
            height: 16px;
          }
        }
      }
    }

  }
</style>
